import React from 'react';
import { Card, Row, Col, Statistic, Progress, Table, Tag } from 'antd';
import {
  UserOutlined,
  AlertOutlined,
  BuildOutlined,
  VideoCameraOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons';

const Dashboard: React.FC = () => {
  // 表格数据
  const alarmData = [
    {
      key: '1',
      device: '空调机组-01',
      type: '温度异常',
      level: 'high',
      time: '2024-01-15 14:30:25',
      status: '未处理',
    },
    {
      key: '2',
      device: '电梯-02',
      type: '故障报警',
      level: 'medium',
      time: '2024-01-15 13:45:12',
      status: '处理中',
    },
    {
      key: '3',
      device: '消防系统-01',
      type: '烟雾检测',
      level: 'low',
      time: '2024-01-15 12:20:48',
      status: '已处理',
    },
  ];

  const columns = [
    {
      title: '设备名称',
      dataIndex: 'device',
      key: 'device',
    },
    {
      title: '报警类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '报警级别',
      dataIndex: 'level',
      key: 'level',
      render: (level: string) => {
        const colors = {
          high: 'error',
          medium: 'warning',
          low: 'success',
        };
        const texts = {
          high: '高',
          medium: '中',
          low: '低',
        };
        return <Tag color={colors[level as keyof typeof colors]}>{texts[level as keyof typeof texts]}</Tag>;
      },
    },
    {
      title: '报警时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '处理状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const colors = {
          '未处理': 'error',
          '处理中': 'processing',
          '已处理': 'success',
        };
        return <Tag color={colors[status as keyof typeof colors]}>{status}</Tag>;
      },
    },
  ];

  return (
    <div>
      {/* 欢迎标题 */}
      <div style={{ marginBottom: '24px' }}>
        <h1>欢迎访问 IBMS 智能建筑管理系统</h1>
        <p style={{ color: '#666', fontSize: '14px' }}>
          实时监控建筑设备运行状态，提供智能化的设备管理服务
        </p>
      </div>

      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: '24px' }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={128}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
              suffix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="报警数量"
              value={23}
              prefix={<AlertOutlined />}
              valueStyle={{ color: '#cf1322' }}
              suffix={<ArrowDownOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="设备总数"
              value={456}
              prefix={<BuildOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="监控点数"
              value={892}
              prefix={<VideoCameraOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 系统状态 */}
      <Row gutter={16} style={{ marginBottom: '24px' }}>
        <Col span={8}>
          <Card title="系统运行状态" extra={<a href="/system/status">详情</a>}>
            <div style={{ marginBottom: '16px' }}>
              <div style={{ marginBottom: '8px' }}>CPU 使用率</div>
              <Progress percent={45} size="small" status="active" />
            </div>
            <div style={{ marginBottom: '16px' }}>
              <div style={{ marginBottom: '8px' }}>内存使用率</div>
              <Progress percent={62} size="small" status="active" />
            </div>
            <div>
              <div style={{ marginBottom: '8px' }}>磁盘使用率</div>
              <Progress percent={78} size="small" status="active" />
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="设备在线率" extra={<a href="/equipment/monitor">详情</a>}>
            <div style={{ textAlign: 'center', marginBottom: '16px' }}>
              <Progress
                type="circle"
                percent={92}
                format={(percent) => `${percent}%`}
                strokeColor={{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }}
              />
            </div>
            <div style={{ textAlign: 'center' }}>
              <p>在线设备: 420 / 456</p>
              <p style={{ color: '#52c41a' }}>系统运行正常</p>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="今日报警统计" extra={<a href="/alarm/list">详情</a>}>
            <div style={{ marginBottom: '12px' }}>
              <span style={{ marginRight: '16px' }}>高:</span>
              <Progress percent={30} size="small" strokeColor="#ff4d4f" />
            </div>
            <div style={{ marginBottom: '12px' }}>
              <span style={{ marginRight: '16px' }}>中:</span>
              <Progress percent={45} size="small" strokeColor="#faad14" />
            </div>
            <div>
              <span style={{ marginRight: '16px' }}>低:</span>
              <Progress percent={25} size="small" strokeColor="#52c41a" />
            </div>
          </Card>
        </Col>
      </Row>

      {/* 最新报警 */}
      <Card title="最新报警信息" extra={<a href="/alarm/list">更多</a>}>
        <Table
          columns={columns}
          dataSource={alarmData}
          pagination={false}
          size="small"
        />
      </Card>
    </div>
  );
};

export default Dashboard;